import React from "react";
import '../css/form.css'
// import { formik } from 'formik'
// import Button from '@mui/material/Button'
// import CountrySelect from './CountrySelect'
// import FloatingActionButtonZoom from './FloatingActionButtonZoom'
import MusicPlayerSlider from './MusicPlayerSlider'
// function TestDom(props) {
//   // console.log(props);
//   return (
//     <div></div>
//   )
// }
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formSelect: '2',
      formName: '3',
      audioDOM: <div></div>
    };
    this.current = 0
    // this.audioDOM = {}

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.durationChange = this.durationChange.bind(this);
    this.getCurrent = this.getCurrent.bind(this)
    // this.changeVolume = this.changeVolume.bind(this)
    this.currentTime = (el) => {
      // this.state.audioDOM = el
      this.setState({
        audioDOM: el
      })
    }
  }

  handleChange(event) {
    const target = event.target
    const value = target.value
    const name = target.name

    this.setState({
      [name]: value
    });
  }

  getCurrent() {
    console.log(this.state.audioDOM.currentTime);
    console.log(this.state.audioDOM.paused);
    if (this.state.audioDOM.paused) {
      this.state.audioDOM.play()
    } else {
      this.state.audioDOM.pause()
    }
    
  }

  durationChange(event) {
    // console.log(event);
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.formName + ',' + this.state.formSelect);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit} className="form" id="form">
        {/* <label>
          名字:
          <input type="text" value={this.state.formName} name="formName" onChange={this.handleChange} />
        </label>
        <br />
        <label>
          <select value={this.state.formSelect} name="formSelect" onChange={this.handleChange}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
        </label> */}

        <audio ref={this.currentTime} src="http://81.69.254.46/music/happyBirthday.mp3" loop autoPlay onDurationChange={this.durationChange}></audio>
        <div className="materialForm">
          {/* <CountrySelect /> */}
          {/* <FloatingActionButtonZoom className="formTab"/> */}
          <div>
            <img className="ava" src="http://81.69.254.46/images/p1.jpg" alt="头像"/>
            <img className="biaoqingpp" src="http://tva3.sinaimg.cn/large/005J4OU5ly1gc57puhcxvg309u09ukgl.gif" title="祝你生日快乐（黄夏温表情包） - 黄夏温祝你生日快乐表情包" alt="祝你生日快乐（黄夏温表情包） - 黄夏温祝你生日快乐表情包"></img>
          </div>
          <div className="MusicCard">
            <MusicPlayerSlider songDOM={this.state.audioDOM} changePlayType={this.getCurrent} />
          </div>
          
          {/* <TestDom songDOM={this.state.audioDOM}></TestDom> */}
          {/* <Button className="formBTN" variant="contained" href="#text-buttons" color="success" size="large" onClick={this.getCurrent}>helloword</Button> */}
          {/* {this.audioDOM && this.audioDOM.currentTime ? <div>i</div> : 0} */}
        </div>
      </form>
    );
  }
}

export { NameForm }